<template>
  <a-card class="chart-card">
    <h2>数据可视化展示</h2>
  </a-card>

  <!-- 答题人数统计 -->
  <a-card class="chart-card">
    <h3>答题人数统计</h3>
    <v-chart :option="answerCountOptions" style="height: 300px" />
  </a-card>

  <!-- 应用使用频率图 -->
  <a-card class="chart-card">
    <h3>应用使用频率图</h3>
    <div class="search-bar">
      <a-input-search
        placeholder="输入应用名称"
        style="width: 300px"
        v-model="searchApp"
        @search="handleSearchApp"
      />
    </div>
    <v-chart :option="appUsageOptions" style="height: 300px" />
  </a-card>

  <!-- 答题正确率 -->
  <a-card class="chart-card">
    <h3>答题正确率</h3>
    <v-chart :option="correctRateOptions" style="height: 300px" />
  </a-card>

  <!-- 答题时长统计 -->
  <a-card class="chart-card">
    <h3>答题时长统计</h3>
    <v-chart :option="answerTimeOptions" style="height: 300px" />
  </a-card>
</template>

<script setup>
import { ref, computed } from "vue";
import VChart from "vue-echarts";
import * as echarts from "echarts";

// 模拟数据
const dateList = Array.from({ length: 7 }, (_, i) => {
  const date = new Date();
  date.setDate(date.getDate() - (6 - i));
  return date.toLocaleDateString();
});

// 答题人数数据
const answerCountData = ref([
  { date: dateList[0], count: 30 },
  { date: dateList[1], count: 40 },
  { date: dateList[2], count: 50 },
  { date: dateList[3], count: 60 },
  { date: dateList[4], count: 70 },
  { date: dateList[5], count: 80 },
  { date: dateList[6], count: 90 },
]);

// 应用使用频率数据
const appUsageData = ref([
  { date: dateList[0], type: "运输", count: 10 },
  { date: dateList[0], type: "掘进", count: 15 },
  { date: dateList[0], type: "采煤", count: 20 },
  { date: dateList[1], type: "运输", count: 20 },
  { date: dateList[1], type: "掘进", count: 25 },
  { date: dateList[1], type: "采煤", count: 30 },
  { date: dateList[2], type: "运输", count: 30 },
  { date: dateList[2], type: "掘进", count: 35 },
  { date: dateList[2], type: "采煤", count: 40 },
  { date: dateList[3], type: "运输", count: 40 },
  { date: dateList[3], type: "掘进", count: 45 },
  { date: dateList[3], type: "采煤", count: 50 },
  { date: dateList[4], type: "运输", count: 50 },
  { date: dateList[4], type: "掘进", count: 55 },
  { date: dateList[4], type: "采煤", count: 60 },
  { date: dateList[5], type: "运输", count: 60 },
  { date: dateList[5], type: "掘进", count: 65 },
  { date: dateList[5], type: "采煤", count: 70 },
  { date: dateList[6], type: "运输", count: 70 },
  { date: dateList[6], type: "掘进", count: 75 },
  { date: dateList[6], type: "采煤", count: 80 },
]);

// 答题正确率数据
const correctRateData = ref([
  { date: dateList[0], rate: 0.85 },
  { date: dateList[1], rate: 0.88 },
  { date: dateList[2], rate: 0.9 },
  { date: dateList[3], rate: 0.92 },
  { date: dateList[4], rate: 0.94 },
  { date: dateList[5], rate: 0.96 },
  { date: dateList[6], rate: 0.98 },
]);

// 答题时长数据
const answerTimeData = ref([
  { date: dateList[0], time: 120 },
  { date: dateList[1], time: 150 },
  { date: dateList[2], time: 180 },
  { date: dateList[3], time: 200 },
  { date: dateList[4], time: 220 },
  { date: dateList[5], time: 240 },
  { date: dateList[6], time: 260 },
]);

// 答题人数统计配置
const answerCountOptions = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: answerCountData.value.map((item) => item.date),
    },
    yAxis: {
      type: "value",
      name: "人数",
    },
    series: [
      {
        data: answerCountData.value.map((item) => item.count),
        type: "line",
        smooth: true,
        lineStyle: {
          color: "#1890ff",
        },
      },
    ],
  };
});

// 应用使用频率图配置
const appUsageOptions = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["运输", "掘进", "采煤"],
    },
    xAxis: {
      type: "category",
      data: dateList,
    },
    yAxis: {
      type: "value",
      name: "使用次数",
    },
    series: [
      {
        name: "运输",
        type: "bar",
        data: appUsageData.value
          .filter((item) => item.type === "运输")
          .map((item) => item.count),
        itemStyle: {
          color: "#52c41a",
        },
      },
      {
        name: "掘进",
        type: "bar",
        data: appUsageData.value
          .filter((item) => item.type === "掘进")
          .map((item) => item.count),
        itemStyle: {
          color: "#1890ff",
        },
      },
      {
        name: "采煤",
        type: "bar",
        data: appUsageData.value
          .filter((item) => item.type === "采煤")
          .map((item) => item.count),
        itemStyle: {
          color: "#f5222d",
        },
      },
    ],
  };
});

// 答题正确率配置
const correctRateOptions = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
      formatter: "{b}: {c}%",
    },
    xAxis: {
      type: "category",
      data: correctRateData.value.map((item) => item.date),
    },
    yAxis: {
      type: "value",
      name: "正确率",
      axisLabel: {
        formatter: "{value}%",
      },
      max: 100,
    },
    series: [
      {
        data: correctRateData.value.map((item) => item.rate * 100),
        type: "line",
        smooth: true,
        lineStyle: {
          color: "#389e0d",
        },
      },
    ],
  };
});

// 答题时长统计配置
const answerTimeOptions = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
      formatter: "{b}: {c}分钟",
    },
    xAxis: {
      type: "category",
      data: answerTimeData.value.map((item) => item.date),
    },
    yAxis: {
      type: "value",
      name: "时长(分钟)",
    },
    series: [
      {
        data: answerTimeData.value.map((item) => item.time),
        type: "line",
        smooth: true,
        lineStyle: {
          color: "#ff7d00",
        },
      },
    ],
  };
});

// 搜索表单
const searchApp = ref("");
const handleSearchApp = () => {
  console.log("搜索应用：", searchApp.value);
};
</script>

<style>
.chart-card {
  margin-bottom: 20px;
}
.search-bar {
  margin-bottom: 16px;
}
</style>
